<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字体编辑器DEMO</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/fabric.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <style>
    @font-face {
      font-family: "creatFont";
      src: url("font/creatfont.eot");
      src: url("font/creatfont.eot?#iefix") format("embedded-opentype"), url("font/creatfont.woff") format("woff"), url("font/creatfont.ttf") format("truetype"), url("font/creatfont.svg#iconfont") format("svg")
    }
    input,div{
      font-family: "creatFont","宋体";
    }
    .big{
      font-size:20px;
      padding: 20px;
      display: inline-block;
    }
  </style>
</head>
<body>

<div class="container" style="background: #ededed">
  <div class="row clearfix">
    <div id="div"></div>

    <div class="col-md-12 column">
      <h3>
        字体编辑器
      </h3>
      <div class="row clearfix">
        <div class="col-md-6 column">
          <h3>
            视图区
          </h3>
          <div class="canvasBox">
            <canvas id="canvasObj" width="500" height="500"></canvas>
          </div>
        </div>
        <div class="col-md-6 column">
          <h3 class="navbar-form">
            功能
          </h3>
          <div class="navbar-form">
            <button type="button" class="btn btn-default btn-primary" id="rest">重置</button>
          </div>
          <div class="navbar-form" role="search">
            <h4>
              插入字
            </h4>

            <div class="form-group">
              <input type="text" class="form-control" maxlength="1" id="text"/>
            </div>
            <button type="submit" class="btn btn-default" id="insert">插入</button>
          </div>

          <div class="navbar-form">
            <h4>
              存入字体对应的组合字
            </h4>
            <div class="form-group">
              <input type="text" class="form-control" maxlength="1" id="groupText"/>
            </div>
            <p></p>
            <button type="button" class="btn btn-default btn-success" id="down">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="newxtCanvas" style="display: none">
  <canvas id="hidecanvas"width="100" height="100"></canvas>\n' +
  '  <img src="" id="IMG" alt="" style="width: 100px;height: 100px;">

</div>
</body>
<script>
    function setTxt() {
        $.get('/getAll',function (res) {
            var str='';
            $.each(res.data,function (a,b) {
                str+='<div class="big">'+b.code+'&nbsp;&nbsp;&nbsp;对应组合是：'+b.group+'</div>'
            })
            $('#div').html(str)
        });
    }
    setTxt();
    (function () {
        fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
        fabric.Object.prototype.transparentCorners = false;
        var canvas=new fabric.Canvas('canvasObj');
        window.fixCanvas=new fabric.Canvas('hidecanvas');
        var getImg=$('#IMG')
        var imgInstance = new fabric.Image(getImg[0],{
            left: 50, //设置图片位置
            top: 50, //设置图片位置
            scaleX: 0.2, //设置缩放比例
            scaleY: 0.2 //设置缩放比例
        });
        fixCanvas.add(imgInstance);

        $('#insert').click(function () {
            var getText = $('#text').val()
            if (getText == '') {
                alert('错误！请输入一个要插入的字')
            } else {
                console.log(getText)
                var textbox = new fabric.Text(getText, {
                    left: 250,
                    top: 250,
                    width: 400,
                    fontSize: 400
                });
                canvas.add(textbox).setActiveObject(textbox);
                $('#text').val('')
                var oldText = $('#groupText').val()
                $('#groupText').val(oldText + getText)
            }
        })

        function download(url, name) {
// make the link. set the href and download. emulate dom click
            $('<a>').attr({href: url, download: name})[0].click();
        }

        function downloadFabric(canvas, name) {
//  convert the canvas to a data url and download it.
            download(canvas.toDataURL(), name + '.png');
        }

        $('#down').click(function () {
            var oldText = $('#groupText').val()

            getImg.attr('src',canvas.toDataURL())
            fixCanvas.clear()
            var imgInstance = new fabric.Image(getImg[0],{
                left: 50, //设置图片位置
                top: 50, //设置图片位置
                scaleX: 0.2, //设置缩放比例
                scaleY: 0.2 //设置缩放比例
            });
            fixCanvas.add(imgInstance);
            setTimeout(function () {
                $.ajax({
                    url: "/saveFile",
                    type: "post",
                    data: {
                        file: fixCanvas.toDataURL(),
                        name: oldText
                    },
                    success: function (res) {
                        if(res.message=="Success"){
                            setTxt();
                            var setPin=parseInt(Math.random()*999999999);
                            var styleTxt='    @font-face {\n' +
                                '      font-family: "creatFont";\n' +
                                '      src: url("font/creatfont.eot?'+setPin+'");\n' +
                                '      src: url("font/creatfont.eot?#iefix&'+setPin+'") format("embedded-opentype"), url("font/creatfont.woff?'+setPin+'") format("woff"), url("font/creatfont.ttf?'+setPin+'") format("truetype"), url("font/creatfont.svg#iconfont&'+setPin+'") format("svg")\n' +
                                '    }';;
                            addCssByStyle(styleTxt)

                        }
                    },
                    error: function (err) {
                    }
                })
                console.log(fixCanvas.toDataURL())
            },1000)

        })
        $('#rest').click(function () {
            canvas.clear()
            $('#groupText').val('')
            $('#text').val('')
        })
    })()


    function addCssByStyle(cssString) {
        var doc = document;
        var style = doc.createElement("style");
        style.setAttribute("type", "text/css");

        if (style.styleSheet) { // IE
            style.styleSheet.cssText = cssString;
        } else { // w3c
            var cssText = doc.createTextNode(cssString);
            style.appendChild(cssText);
        }

        var heads = doc.getElementsByTagName("head");
        if (heads.length){
            heads[0].appendChild(style);
        }
        else{
            doc.documentElement.appendChild(style);
        }
    }
</script>
</html>
